﻿@using Nop.Services
@model CustomerModel

<div class="panel-group">
    <p>
        设置用户每月总工时:
        <br />每月工时不变时，配置年：0 月：0 工时：*
        <br />每年工时不变时，配置年：* 月：0 工时：*
    </p>
    @if (Model.Id > 0)
    {
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="hours-grid"></div>

                    <script>
                        $(document).ready(function() {
                            $("#hours-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("Hours", "Customer", new {uId = Model.Id}))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        update: {
                                            url: "@Html.Raw(Url.Action("HourUpdate", "Customer"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        destroy: {
                                            url: "@Html.Raw(Url.Action("HourDelete", "Customer"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors",
                                        model: {
                                            id: "Id",
                                            fields: {
                                                Year: { editable: true, type: "number" },
                                                Month: { editable: true, type: "number" },
                                                Hours: { editable: true, type: "number" },
                                                Id: { editable: false, type: "number" }
                                            }
                                        }
                                    },
                                    requestEnd: function(e) {
                                        if (e.type == "update") {
                                            this.read();
                                        }
                                    },
                                    error: function(e) {
                                        display_kendoui_grid_error(e);
                                        // Cancel the changes
                                        this.cancelChanges();
                                    },
                                    serverPaging: true,
                                    serverFiltering: true,
                                    serverSorting: true
                                },
                                pageable: {
                                    refresh: true,
                                    numeric: false,
                                    previousNext: false,
                                    info: false,
                                    @Html.Partial("_GridPagerMessages")
                                },
                                editable: {
                                    confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                    mode: "inline"
                                },
                                scrollable: false,
                                columns: [
                                    {
                                        field: "Year",
                                        title: "年",
                                        width: 150,
                                        //integer format
                                        format: "{0:0}"
                                    },{
                                        field: "Month",
                                        title: "月",
                                        width: 200,
                                        encoded: false,
                                        editor: function setDropDownEditor(container, options) {
                                            var dropDownList = $('<input required data-bind="value:Month"/>')
                                                .appendTo(container).kendoDropDownList({ dataTextField: "Name", dataValueField: "Id" }).data("kendoDropDownList");

                                            var availableOptions = [
                                                @foreach (var item in Model.CustomerHours.AvailableMonths)
	                                            {
                                                        <text>
                                                        { Id: @item.Value, Name: "@item.Text" },
                                                        </text>
	                                            }
                                            ];
                                            dropDownList.setDataSource(availableOptions);
                                            dropDownList.select(function (item) {
                                                return item.Id === options.model.Month;
                                            });
                                                }
                                    },
                                    {
                                        field: "Hours",
                                        title: "工时",
                                        width: 150,
                                    },
                                    {
                                        command: [
                                            {
                                                name: "edit",
                                                text: {
                                                    edit: "@T("Admin.Common.Edit")",
                                                    update: "@T("Admin.Common.Update")",
                                                    cancel: "@T("Admin.Common.Cancel")"
                                                }
                                            }, {
                                                name: "destroy",
                                                text: "@T("Admin.Common.Delete")"
                                            }
                                        ],
                                        width: 200
                                    }
                                ]
                            });
                        });
                    </script>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    添加月度工时
                </div>
                <div class="panel-body">
                    <script type="text/javascript">

                        $(document).ready(function() {
                            $('#addHour').click(function() {
                                var year = $("#@Html.FieldIdFor(model => model.CustomerHours.Year)").val();
                                var month = $("#@Html.FieldIdFor(model => model.CustomerHours.Month)").val();
                                var hours = $("#@Html.FieldIdFor(model => model.CustomerHours.Hours)").val();

                            var postData = {
                                year: year,
                                month: month,
                                hours: hours,
                                customerId: @(Model.Id)
                                };
                            addAntiForgeryToken(postData);

                            $.ajax({
                                cache: false,
                                type: "POST",
                                url: "@(Url.Action("HourAdd", "Customer"))",
                                data: postData,
                                success: function(data) {
                                    var grid = $("#hours-grid").data('kendoGrid');
                                    grid.dataSource.read();
                                    $('#addHour').attr('disabled', false);
                                },
                                error: function(xhr, ajaxOptions, thrownError) {
                                    alert('Failed to add specification attribute.');
                                    $('#addHour').attr('disabled', false);
                                }
                            });
                        });
                        });

                    </script>

                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.CustomerHours.Year)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.CustomerHours.Year)
                            @Html.ValidationMessageFor(model => model.CustomerHours.Year)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.CustomerHours.Month)
                        </div>
                        <div class="col-md-9">
                            @Html.NopDropDownListFor(model => model.CustomerHours.Month, Model.CustomerHours.AvailableMonths)
                            @Html.ValidationMessageFor(model => model.CustomerHours.Month)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.CustomerHours.Hours)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.CustomerHours.Hours)
                            @Html.ValidationMessageFor(model => model.CustomerHours.Hours)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <button type="button" id="addHour" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
    }
    else
    {
        <div class="panel panel-default">
            <div class="panel-body">
                请先保存用户，再设置月度工时
            </div>
        </div>
    }
</div>
